<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" draggable="true">
      我们刚才的案例中的script标签在不修改代码的基础上，就必须放在body标签之后 ;
      原因是因为必须在页面加载完成之后，我们才可以获取到图片标签 ;
      若想把script标签放在body标签之前，这里可以通过添加页面加载成功事件来处理。
      事件是可以被 javascript 侦测到的行为(类似监听器)。
      网页中的每个元素都可以产生某些可以触发 javascript 函数的事件。例如 :
      页面加载成功的之后我们来触发某个函数，又如我们可以在用户点击某个标签时产生一个单击事件来触发某个函数
    </div>

    <script>
      let app = document.querySelector("#app");

      // 监听 copy 事件
      app.addEventListener("copy", function (e) {
        // 阻止默认事件
        e.preventDefault();
        alert("请登录");
        console.log(event);
        console.log("copy 事件被触发了");
        // // 获取复制的内容
        // let content = window.getSelection().toString();
        // // 获取剪切板内容
        // // let content = event.clipboardData.getData("text");
        // // console.log(content);
        // navigator.clipboard.writeText(content + "---kaifamiao");
      });

      window.addEventListener("copy", function () {
        event.preventDefault();
        console.log("document copy 事件被触发了");
        let content = window.getSelection().toString();
        navigator.clipboard.writeText(content + "---kaifamiao");
      });
    </script>
  </body>
</html>
